<template>
    <div class="statistics">
        <div class="statistics-page">
            <div class="statistics-page-nav">
                 <el-tabs @tab-change="parentMethod"
                    v-model="types" v-if="menuItem.length > 0" 
                    class="custom-tabs"
                    >
                    <el-tab-pane
                    v-for="tab in menuItem"
                    :key="tab.perms"
                    :label="tab.menuName"
                    :name="tab.perms"
                    >
                    </el-tab-pane>
                </el-tabs> 
            </div>
            
        </div>
        <div class="statistics-content">
            <clinicIncome  v-if="tabs == 'statistics-revenue'"></clinicIncome>
            <tableModel  v-if="tabs == 'statistics-performance'"></tableModel>
        </div>
    </div>
</template>

<script setup lang="ts">
import clinicIncome from './common/clinicIncome.vue';
import tableModel from './common/tableModel/index.vue'

const list = ref<any>([])
const tabs = ref<string>('');
//获取菜单
import stores from '@/store';
const route = useRoute();
//菜单权限
let menuList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.menuId));
//console.log(menuList.value,'menuList.value');

// menuList.value.filter((item:any) => {
//     return  item.menuType == 2;
// })

const types = ref<string>(); // 默认选中标签
let menuItem = ref<any>(menuList.value);
const parentMethod = (e: any) => {
    //console.log(e, '父组件方法被调用');
    for (let index = 0; index < menuItem.value.length; index++) {
        let item = menuItem.value[index];
        if(item.perms === e){
            navigateTo('/statistics?menuId='+route.query.menuId+'&submenuId='+item.menuId);
            setTimeout(() => {
                tabs.value = e
            }, 222);

        }
    }

}
if(menuItem.value.length > 0){
    types.value = menuItem.value[0].perms;// 默认选中标签
    tabs.value = menuItem.value[0].perms
    navigateTo('/statistics?menuId='+route.query.menuId+'&submenuId='+menuItem.value[0].menuId);
}


</script>

<style lang="scss" scoped>
.statistics {
    height: 100%;
}

.statistics-page {
    background: #fff;
    border-radius: 6px;
    height: 100%;
    padding-bottom: 2px;

    .statistics-page-nav {
        display: flex;
        align-items: center;
        justify-content: left;
        border-radius: 4px;
        border-bottom: 1px solid #E7E7E7;
        padding: 0 12px;
        ::v-deep(.el-tabs__item) {
            width: 90px !important; /* 设置每个tab的宽度 */
            padding: 0 !important; /* 去除默认padding */
            font-size: 16px !important; /* 设置字体大小 */
            margin: 0 10px;
        }
        ::v-deep(.el-tabs__nav-wrap:after){
            height: 1px !important;
        }
        ::v-deep(.el-tabs__header) {
            margin: 0;
        }
        .el-dropdown-link {
            background: rgba(22, 173, 164, 0.08);
            border-radius: 0px 0px 0px 0px;
            padding: 16px 21px;
            cursor: pointer;
            color: var(--el-color-primary) !important;
            display: flex;
            font-size: 16px;
            align-items: center;
        }

    }


}
</style>